<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<thead>
					<th><input type="checkbox" name="cb_select_all" /></th>
					<th>id</th>
					<th>名称</th>
					<th>价格</th>
					<th>出版日期</th>
					<th>数量</th>
					<th>操作</th>
				</thead>
				<tbody>
					<tr v-for="item in books">
						<td><input type="checkbox" name="cb_select" :value="item.id" /></td>
						<td>{{item.id}}</td>
						<td v-text="item.name"></td>
						<td>{{item.price}}</td>
						<td>
							<button type="button">-</button>
							{{item.count}}
							<button type="button">+</button>
						</td>
						<td>{{item.tdate}}</td>
						<td>
							<button type="button">编辑</button>
							<button type="button">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					books: [{
							id: 1,
							name: 'Java从入门到放弃',
							price: 80,
							tdate: '2020-07-01',
							count: 1,
							account: "hehe"
						},
						{
							id: 2,
							name: 'Vue从入门到放弃',
							price: 90,
							tdate: '2020-07-02',
							count: 1,
							account: "haha"
						},
						{
							id: 3,
							name: 'Mysql从入门到放弃',
							price: 100.01,
							tdate: '2020-07-03',
							count: 1,
							account: "hehe"
						},
						{
							id: 4,
							name: '啥都从入门到放弃',
							price: 70.00,
							tdate: '2020-07-04',
							count: 1,
							account: "haha"
						},
					]
				}
			});
		</script>
	</body>
</html>
